<template>
    <div class="authority">
        <div class="gva-search-box">
            <el-form ref="searchForm" :inline="true">
                <el-form-item label="办公楼名称">
                    <el-input v-model="searchInfo.buildingName"></el-input>
                </el-form-item>
                <el-form-item label="项目名称">
                    <el-input v-model="searchInfo.name"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="search" @click="onSubmit">
                        查询
                    </el-button>
                    <el-button icon="refresh" @click="onReset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="gva-table-box unit">
            <div class="gva-btn-list">
                <el-button type="primary" icon="plus" @click="addUnit">维修申报</el-button>
            </div>
            <div class="ant-alert-info">
                <el-popover placement="left-start" :width="350" trigger="click" transition='el-zoom-in-left'>
                    <div class="pop-content">
                        <div class="pop-title">自定义列</div>
                        <div class="check-list">
                            <el-checkbox-group v-model="checkedColumns" @change="handleColumnsChange">
                                <el-checkbox v-for="column in columns" :value="column" :label="column"></el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </div>
                    <template #reference>
                        <div class="anticon">
                            <el-icon size="16" color="#1890ff">
                                <Setting />
                            </el-icon>
                            <div style="margin-left: 2px;">自定义列</div>
                        </div>
                    </template>
                </el-popover>
            </div>
            <el-table :data="tableData" row-key="id">
                <el-table-column type="index" label="序号" width="100" />
                <el-table-column align="left" label="办公楼名称" prop="buildingName" show-overflow-tooltip
                    v-if="checkedColumns.includes('办公楼名称')"></el-table-column>
                <el-table-column align="left" label="项目名称" prop="name" show-overflow-tooltip
                    v-if="checkedColumns.includes('项目名称')"></el-table-column>
                <el-table-column align="left" label="匡算合计" prop="totalFunding" show-overflow-tooltip
                    v-if="checkedColumns.includes('匡算合计')"></el-table-column>
                <el-table-column align="left" label="配置时间" v-if="checkedColumns.includes('配置时间')">
                    <template #default="scope">
                        {{ formatTimestamps(scope.row.applyAt) }}
                    </template>
                </el-table-column>
                <el-table-column align="left" label="申请时间" v-if="checkedColumns.includes('申请时间')">
                    <template #default="scope">
                        {{ formatTimestamps(scope.row.applyAt) }}
                    </template>
                </el-table-column>
                <el-table-column align="left" label="提交状态" v-if="checkedColumns.includes('提交状态')">
                    <template #default="scope">
                        <span>{{ scope.row.submitStatus == 1 ? '已提交' : '待提交' }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="left" label="审批状态" v-if="checkedColumns.includes('审批状态')">
                    <template #default="scope">
                        <span>{{ scope.row.examineStatus == 1 ? '已审批' : '未审批' }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="left" label="审批结果" prop="contactUs" v-if="checkedColumns.includes('审批结果')">
                    <template #default="scope">
                        <span>{{ adoptList[scope.row.adopt].name }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="left" label="附件" v-if="checkedColumns.includes('附件')">
                    <template #default="scope">
                        <span style="color: #3b82f6;cursor: pointer;" @click="seeFile(scope.row.id)">查看</span>
                    </template>
                </el-table-column>
                <el-table-column align="left" label="操作" v-if="checkedColumns.includes('操作')" min-width="100">
                    <template #default="scope">
                        <el-button type="primary" link icon="edit" v-if="scope.row.submitStatus == 0"
                            @click="editUnit(scope.row)">
                            编辑
                        </el-button>
                        <el-button type="primary" link @click="seeDetail(scope.row)">
                            详情
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="gva-pagination">
                <el-pagination v-model:current-page="page" :page-size="pageSize" :total="total"
                    layout="prev, pager, next" @current-change="handleCurrentChange" />
            </div>
        </div>
        <el-drawer v-model="dialogFormVisible" :size="1300" :before-close="handleClose" :show-close="false"
            class="sb-draw">
            <template #header>
                <div class="flex justify-between items-center">
                    <span class="text-lg">{{ dialogTitle }}</span>
                    <div>
                        <el-button @click="closeDialog">取消</el-button>
                        <!-- <el-button type="primary" @click="enterDialog">确定</el-button> -->
                    </div>
                </div>
            </template>
            <el-steps class="mb-4" :space="200" :active="active" simple>
                <el-step title="基本信息" :icon="Document" />
                <el-step title="维修系统" :icon="Document" />
                <el-step title="上传材料" :icon="Memo" />
            </el-steps>

            <el-form v-if="dialogFormVisible && active == 1" ref="yyglForm" label-width="250" :model="form1"
                :rules="rules">
                <div class="section-title">基本信息</div>
                <el-form-item label="项目名称" prop="name">
                    <el-input v-model="form1.name" placeholder="请输入" style="width: 350px;" />
                    <span style="margin-left: 4px;color: #FF473E;">注：多栋办公楼维修项目名称必须一致</span>
                </el-form-item>
                <el-form-item label="维修办公楼" prop="buildingId">
                    <el-select v-model="form1.buildingId" placeholder="请选择" style="width: 350px;">
                        <el-option v-for="item in buildList" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                    <span style="margin-left: 4px;color: #FF473E;">注：请选择办公楼</span>
                </el-form-item>
                <el-form-item label="是否涉及房间布局调整或使用功能变更" prop="change">
                    <el-radio-group v-model="form1.change" class="ml-4">
                        <el-radio :value="1" size="large">是</el-radio>
                        <el-radio :value="2" size="large">否</el-radio>
                    </el-radio-group>
                    <span style="margin-left: 4px;color: #FF473E;">注：办公用房布局调整、超面积整改的情况需提楼层原始平面图与改造方案平面图</span>
                </el-form-item>
                <el-form-item label="联系人" prop="contacts">
                    <el-input v-model="form1.contacts" placeholder="请输入" style="width: 350px;" />
                    <span style="margin-left: 4px;color: #FF473E;">注：如不一致请更改</span>
                </el-form-item>
                <el-form-item label="联系电话" prop="contactUs">
                    <el-input v-model="form1.contactUs" placeholder="请输入" style="width: 350px;" />
                    <span style="margin-left: 4px;color: #FF473E;">注：如不一致请更改</span>
                </el-form-item>
                <el-form-item label="规模与时间情况" prop="modelDate">
                    <el-input v-model="form1.modelDate" type="textarea" :rows="3" placeholder="请输入"
                        style="width: 350px;" />
                    <span style="margin-left: 4px;color: #FF473E;">示例：XX年XX月竣工验收，XX年XX月正式投入使用，距今已使用XX日</span>
                </el-form-item>
                <el-form-item label="历史维修情况说明" prop="history">
                    <el-input v-model="form1.history" type="textarea" :rows="3" placeholder="请输入"
                        style="width: 350px;" />
                    <span style="margin-left: 4px;color: #FF473E;">示例：XX 年 XX 月 - XX 年 XX 月 XX系统
                        大（中）或日常维修修缮，目前已过保修期。</span>
                </el-form-item>
                <div class="section-title">维修内容</div>
                <el-form-item label="">
                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
                        @change="handleCheckAllChange">全选</el-checkbox>
                </el-form-item>
                <el-form-item label="" prop="checkOptions">
                    <el-checkbox-group v-model="form1.checkOptions">
                        <el-checkbox v-for="item in checkOptions" :value="item.id" :label="item.name"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="">
                    <el-button type="primary" @click="next">下一步</el-button>
                    <el-button @click="closeDialog">关闭</el-button>
                </el-form-item>
            </el-form>

            <el-form v-if="dialogFormVisible && active == 2" ref="yyglForm" label-width="210" :model="form1"
                :rules="rules2">
                <div class="section-title">维修内容详情</div>
                <div v-for="item in form1.declareDetail">
                    <div class="title">{{ item.system }}</div>
                    <el-form-item label="名称" prop="name">
                        <el-input v-model="item.name" placeholder="请输入" style="width: 500px;" />
                    </el-form-item>
                    <el-form-item label="概要描述" prop="profile">
                        <el-input v-model="item.profile" placeholder="请输入" type="textarea" :rows="3"
                            style="width: 500px;" />
                    </el-form-item>
                    <el-form-item label="匡算" prop="funding">
                        <el-input v-model="item.funding" placeholder="请输入" @input="(e) => formatValue(e, item)"
                            style="width: 500px;" />
                        <span style="margin-left: 4px;">万元</span>
                        <span style="margin-left: 10px;color: #FF473E;">注：保留小数点后2位</span>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input v-model="item.notes" placeholder="请输入" style="width: 500px;" />
                    </el-form-item>
                </div>
                <el-form-item label="当前维修项目概算经费合计为" prop="name">
                    <el-input :value="totalNum" placeholder="请输入" disabled style="width: 500px;" />
                    <span style="margin-left: 4px;">万元</span>
                </el-form-item>
                <el-form-item label="">
                    <el-button type="primary" @click="prev">上一步</el-button>
                    <el-button type="primary" @click="next">下一步</el-button>
                    <el-button @click="closeDialog">关闭</el-button>
                    <el-button type="primary" @click="downloadTable">下载申请表</el-button>
                </el-form-item>
            </el-form>

            <el-form v-if="dialogFormVisible && active == 3" ref="yyglForm" label-width="210" :model="form1"
                :rules="rules">
                <div class="section-title">上传附件</div>
                <el-form-item label="上传维修函" prop="wxh" style="align-items: normal;">
                    <el-upload ref="uploadRef" v-model:file-list="fileList1" :action="adminUrl"
                        :on-success="uploadSuccess1" :headers="headerOdj">
                        <el-button type="primary">选择文件</el-button>
                    </el-upload>
                    <span style="margin: 0 0 6px 20px;text-decoration: underline;color: #3b82f6;cursor: pointer;"
                        @click="wxhDownload">维修函模板下载</span>
                </el-form-item>
                <el-form-item label="上传申请表" prop="sqb" style="align-items: normal;">
                    <el-upload v-model:file-list="fileList2" :action="adminUrl" :on-success="uploadSuccess2"
                        :headers="headerOdj">
                        <el-button type="primary">选择文件</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item label="工程匡算文件" prop="gcks" style="align-items: normal;">
                    <el-upload v-model:file-list="fileList3" :action="adminUrl" :on-success="uploadSuccess3"
                        :headers="headerOdj">
                        <el-button type="primary">选择文件</el-button>
                    </el-upload>
                    <span style="margin: 0 0 6px 20px;color: #FF473E;">计划维修项目的工程估/概算书、Excel表格格式</span>
                </el-form-item>
                <el-form-item label="维修方案" prop="fileType" style="align-items: normal;">
                    <el-upload v-model:file-list="fileList4" :action="adminUrl" :on-success="uploadSuccess4"
                        :headers="headerOdj">
                        <el-button type="primary">选择文件</el-button>
                    </el-upload>
                    <span style="margin: 0 0 6px 20px;color: #FF473E;">计划维修项目的维修技术方案、dwg格式(CAD图纸)/pdf格式文件</span>
                </el-form-item>
                <el-form-item label="功能变更、面积核算文件" prop="fileType" style="align-items: normal;">
                    <el-upload v-model:file-list="fileList5" :action="adminUrl" :on-success="uploadSuccess5"
                        :headers="headerOdj">
                        <el-button type="primary">选择文件</el-button>
                    </el-upload>
                    <span
                        style="margin: 0 0 6px 20px;color: #FF473E;">办公用房分层平面现状图、计划调整方案平面图；申请单位人员编制变化情况佐证材料；办公用房需求核算表。dwg格式(CAD图纸)/pdf格式文件</span>
                </el-form-item>

                <el-form-item v-if="showByxzm" label="必要性证明文件" prop="byxzm" style="align-items: normal;">
                    <el-upload ref="uploadRef" v-model:file-list="fileList6" :action="adminUrl"
                        :on-success="uploadSuccess6" :headers="headerOdj">
                        <el-button type="primary">选择文件</el-button>
                    </el-upload>
                    <span
                        style="margin: 0 0 6px 20px;color: #FF473E;">房屋质量检测报告或房屋安全鉴定报告(承重系统、围护系统、装饰装修系统、给水排水系统、通风与空调系统、电气系统，有多个系统的合并上传)</span>
                </el-form-item>
                <el-form-item v-if="showDtbg" label="电梯安全评估报告" prop="dtbg" style="align-items: normal;">
                    <el-upload v-model:file-list="fileList7" :action="adminUrl" :on-success="uploadSuccess7"
                        :headers="headerOdj">
                        <el-button type="primary">选择文件</el-button>
                    </el-upload>
                    <span style="margin: 0 0 6px 20px;color: #FF473E;">电梯系统</span>
                </el-form-item>
                <el-form-item v-if="showXfzg" label="消防整改意见书" prop="xfzg" style="align-items: normal;">
                    <el-upload v-model:file-list="fileList8" :action="adminUrl" :on-success="uploadSuccess8"
                        :headers="headerOdj">
                        <el-button type="primary">选择文件</el-button>
                    </el-upload>
                    <span style="margin: 0 0 6px 20px;color: #FF473E;">消防系统</span>
                </el-form-item>
                <el-form-item v-if="showZzcl" label="相关专用佐证材料" prop="zzcl" style="align-items: normal;">
                    <el-upload v-model:file-list="fileList9" :action="adminUrl" :on-success="uploadSuccess9"
                        :headers="headerOdj">
                        <el-button type="primary">选择文件</el-button>
                    </el-upload>
                    <span style="margin: 0 0 6px 20px;color: #FF473E;">办公区附属设施系统</span>
                </el-form-item>

                <el-form-item label="" style="margin-top: 100px;">
                    <el-button type="primary" @click="prev">上一步</el-button>
                    <el-button type="primary" @click="next(0)">保存</el-button>
                    <el-button type="primary" @click="next(1)">保存并提交</el-button>
                    <el-button @click="closeDialog">关闭</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>

        <el-drawer v-model="dialog3" :size="1000" :before-close="handleClose3" :show-close="false"
            class="loudong-drawer">
            <template #header>
                <div class="flex justify-between items-center">
                    <span class="text-lg">查看附件</span>
                    <div>
                        <el-button @click="closeDialog3">取消</el-button>
                    </div>
                </div>
            </template>
            <el-table :data="fjList" row-key="id">
                <el-table-column type="index" label="序号" width="100" />
                <el-table-column align="left" label="文件名" prop="fileName">
                </el-table-column>
                <el-table-column align="left" label="文件类型">
                    <template #default="scope">
                        {{ fileTypes[scope.row.fileType] }}
                    </template>
                </el-table-column>
                <el-table-column align="left" label="上传时间">
                    <template #default="scope">
                        {{ formatTimestamps(scope.row.createdAt) }}
                    </template>
                </el-table-column>
                <el-table-column align="left" fixed="right" label="操作">
                    <template #default="scope">
                        <el-button type="primary" link icon="download" @click="download(scope.row)">
                            下载
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-drawer>

        <el-drawer v-model="detailVisible" :size="1300" :before-close="handleCloseDetail" :show-close="false"
            class="sb-draw">
            <template #header>
                <div class="flex justify-between items-center">
                    <span class="text-lg">详情</span>
                    <div>
                        <el-button @click="detailVisible = false">取消</el-button>
                    </div>
                </div>
            </template>
            <el-form v-if="detailVisible" label-width="250" disabled>
                <div class="section-title">基本信息</div>
                <el-form-item label="项目名称" prop="name">
                    <el-input v-model="form2.name" placeholder="请输入" style="width: 350px;" />
                    <span style="margin-left: 4px;color: #FF473E;">注：多栋办公楼维修项目名称必须一致</span>
                </el-form-item>
                <el-form-item label="维修办公楼" prop="buildingId">
                    <el-select v-model="form2.buildingId" placeholder="请选择" style="width: 350px;">
                        <el-option v-for="item in buildList" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                    <span style="margin-left: 4px;color: #FF473E;">注：请选择办公楼</span>
                </el-form-item>
                <el-form-item label="是否涉及房间布局调整或使用功能变更" prop="change">
                    <el-radio-group v-model="form2.change" class="ml-4">
                        <el-radio :value="1" size="large">是</el-radio>
                        <el-radio :value="2" size="large">否</el-radio>
                    </el-radio-group>
                    <span style="margin-left: 4px;color: #FF473E;">注：办公用房布局调整、超面积整改的情况需提楼层原始平面图与改造方案平面图</span>
                </el-form-item>
                <el-form-item label="联系人" prop="contacts">
                    <el-input v-model="form2.contacts" placeholder="请输入" style="width: 350px;" />
                    <span style="margin-left: 4px;color: #FF473E;">注：如不一致请更改</span>
                </el-form-item>
                <el-form-item label="联系电话" prop="contactUs">
                    <el-input v-model="form2.contactUs" placeholder="请输入" style="width: 350px;" />
                    <span style="margin-left: 4px;color: #FF473E;">注：如不一致请更改</span>
                </el-form-item>
                <el-form-item label="规模与时间情况" prop="modelDate">
                    <el-input v-model="form2.modelDate" type="textarea" :rows="3" placeholder="请输入"
                        style="width: 350px;" />
                    <span style="margin-left: 4px;color: #FF473E;">示例：XX年XX月竣工验收，XX年XX月正式投入使用，距今已使用XX日</span>
                </el-form-item>
                <el-form-item label="历史维修情况说明" prop="history">
                    <el-input v-model="form2.history" type="textarea" :rows="3" placeholder="请输入"
                        style="width: 350px;" />
                    <span style="margin-left: 4px;color: #FF473E;">示例：XX 年 XX 月 - XX 年 XX 月 XX系统
                        大（中）或日常维修修缮，目前已过保修期。</span>
                </el-form-item>
                <div class="section-title">维修内容</div>
                <el-form-item label="巡查系统" prop="checkOptions">
                    <el-checkbox-group v-model="form2.checkOptions">
                        <el-checkbox v-for="item in checkOptions" :value="item.id" :label="item.name"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <div class="section-title">维修内容详情</div>
                <div v-for="item in form2.declareDetail">
                    <div class="title">{{ item.system }}</div>
                    <el-form-item label="名称" prop="name">
                        <el-input v-model="item.name" placeholder="请输入" style="width: 500px;" />
                    </el-form-item>
                    <el-form-item label="概要描述" prop="profile">
                        <el-input v-model="item.profile" placeholder="请输入" type="textarea" :rows="3"
                            style="width: 500px;" />
                    </el-form-item>
                    <el-form-item label="匡算" prop="funding">
                        <el-input v-model="item.funding" placeholder="请输入" style="width: 500px;" />
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input v-model="item.notes" placeholder="请输入" style="width: 500px;" />
                    </el-form-item>
                </div>
                <el-form-item label="当前维修项目概算经费合计为" prop="name">
                    <el-input :value="form2.totalFunding" placeholder="请输入" disabled style="width: 500px;" />
                    <span style="margin-left: 4px;">万元</span>
                </el-form-item>
            </el-form>
        </el-drawer>
    </div>
</template>
<script setup>
import {
    buildingAll
} from '@/api/unit'
import {
    optionList,
    declareMediumApply,
    declareMedium,
    declareMediumFile,
    declareMediumDetail,
    applyForm,
    applyEdit
} from '@/api/yewuguanli'

import { reactive, ref, onMounted, computed } from 'vue'
import { useAppStore } from "@/pinia";
import { useUserStore } from '@/pinia/modules/user'
import { buildTimeList, countdownEmits, ElMessage, ElMessageBox, useFormItem } from 'element-plus'
import { Document, Memo } from '@element-plus/icons-vue'
import { formatTimestamps } from '@/utils/format'
import { fileTypes, adoptList } from '@/utils/constant';
defineOptions({
    name: 'Yygl'
})
const appStore = useAppStore()

const searchInfo = ref({
    buildingName: '',
    name: '',
    type: 1
})
const isIndeterminate = ref(false)
const checkAll = ref('')
function handleCheckAllChange(val) {
    var checkedsItem = val ? checkOptions.value : []
    if (checkedsItem.length > 0) {
        checkedsItem.map(item => {
            form1.value.checkOptions.push(item.id)
        })
        yyglForm.value.validateField('checkOptions')
    } else {
        form1.value.checkOptions = []
    }
    isIndeterminate.value = false
}
const showByxzm = computed(() => {
    let res = false
    console.log(form1.value.checkOptions, 'form1.value.checkOptions')
    res = [2, 5, 21, 36, 37, 38].some(item => form1.value.checkOptions.includes(item));
    return res
})
const showDtbg = computed(() => {
    let res = false
    console.log(form1.value.checkOptions, 'form1.value.checkOptions')
    res = [39].some(item => form1.value.checkOptions.includes(item));
    return res
})
const showXfzg = computed(() => {
    let res = false
    res = [40].some(item => form1.value.checkOptions.includes(item));
    return res
})
const showZzcl = computed(() => {
    let res = false
    res = [41].some(item => form1.value.checkOptions.includes(item));
    return res
})
const userStore = useUserStore()
const headerOdj = ref({ token: userStore.token })
const adminUrl = ref('')
adminUrl.value = import.meta.env.VITE_BASE_PATH + '/file/upload'
const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
const dialogFormVisible = ref(false)
let validate1 = (rule, value, callback) => {
    if (fileList1.value.length == 0) {
        callback(new Error('请上传文件'))
    } else {
        callback()
    }
}
let validate2 = (rule, value, callback) => {
    if (fileList2.value.length == 0) {
        callback(new Error('请上传文件'))
    } else {
        callback()
    }
}
let validate3 = (rule, value, callback) => {
    if (fileList3.value.length == 0) {
        callback(new Error('请上传文件'))
    } else {
        callback()
    }
}
let validate4 = (rule, value, callback) => {
    if (fileList6.value.length == 0) {
        callback(new Error('请上传文件'))
    } else {
        callback()
    }
}
let validate5 = (rule, value, callback) => {
    if (fileList7.value.length == 0) {
        callback(new Error('请上传文件'))
    } else {
        callback()
    }
}
let validate6 = (rule, value, callback) => {
    if (fileList8.value.length == 0) {
        callback(new Error('请上传文件'))
    } else {
        callback()
    }
}
let validate7 = (rule, value, callback) => {
    if (fileList9.value.length == 0) {
        callback(new Error('请上传文件'))
    } else {
        callback()
    }
}
const rules = reactive({
    name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
    buildingId: [{ required: true, message: '请选择办公楼', trigger: 'change' }],
    contacts: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
    contactUs: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
    wxh: [{ required: true, validator: validate1, trigger: 'change' }],
    sqb: [{ required: true, validator: validate2, trigger: 'change' }],
    gcks: [{ required: true, validator: validate3, trigger: 'change' }],
    byxzm: [{ required: true, validator: validate4, trigger: 'change' }],
    dtbg: [{ required: true, validator: validate5, trigger: 'change' }],
    xfzg: [{ required: true, validator: validate6, trigger: 'change' }],
    zzcl: [{ required: true, validator: validate7, trigger: 'change' }],
    checkOptions: [{ required: true, message: '请选择巡查系统', trigger: 'change' }]
})
let validatePass = (rule, value, callback) => {
    callback()
}
const rules2 = reactive({
    name: [{ required: true, validator: validatePass, trigger: 'blur' }],
    profile: [{ required: true, validator: validatePass, trigger: 'blur' }],
    funding: [{ required: true, validator: validatePass, trigger: 'blur' }]
})
const active = ref(1)

const totalNum = computed(() => {
    return form1.value.declareDetail.reduce((prev, next) => prev + Number(next.funding), 0).toFixed(2)
})
const form1 = ref({
    buildingId: '',
    name: '',
    change: 1,
    //changeType: '',
    contactUs: '',
    contacts: '',
    estimates: '',
    history: '',
    modelDate: '',
    notes: '',
    totalFunding: '',
    type: 1,
    year: new Date().getFullYear(),
    checkOptions: [],//自己定义的
    declareDetail: [],
    declareFile: [],
    check: 0,
    submitStatus: 0
})

const initForm = () => {
    yyglForm.value.resetFields()
    form1.value = {
        buildingId: '',
        name: '',
        change: 1,
        //changeType: '',
        contactUs: '',
        contacts: '',
        estimates: '',
        history: '',
        modelDate: '',
        notes: '',
        totalFunding: '',
        type: 1,
        year: new Date().getFullYear(),
        checkOptions: [],//自己定义的
        declareDetail: [],
        declareFile: [],
        check: 0,
        submitStatus: 0
    }
    active.value = 1
    fileList1.value = []
    fileList2.value = []
    fileList3.value = []
    fileList4.value = []
    fileList5.value = []
    fileList6.value = []
    fileList7.value = []
    fileList8.value = []
    fileList9.value = []
}

const checkedColumns = ref(['序号', '办公楼名称', '项目名称', '匡算合计', '申请时间', '提交状态', '审批状态', '审批结果', '附件', '操作'])

if (localStorage.getItem('columnData') && JSON.parse(localStorage.getItem('columnData')).dzxsq) {
    checkedColumns.value = JSON.parse(localStorage.getItem('columnData')).dzxsq
}
const columns = ref(['序号', '办公楼名称', '项目名称', '匡算合计', '申请时间', '提交状态', '审批状态', '审批结果', '附件', '操作'])
const handleColumnsChange = (val) => {
    let obj = {

    }
    if (localStorage.getItem('columnData')) {
        obj = JSON.parse(localStorage.getItem('columnData'))
    }
    obj.dzxsq = val
    localStorage.setItem('columnData', JSON.stringify(obj))
}
function formatValue(val, item) {
    let temp = val.toString();
    temp = temp.replace(/。/g, ".");
    temp = temp.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符
    temp = temp.replace(/^\./g, ""); //验证第一个字符是数字
    temp = temp.replace(/\.{2,}/g, ""); //只保留第一个, 清除多余的
    temp = temp.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
    temp = temp.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3"); //只能输入两个小数
    item.funding = temp;
}
const isEdit = ref(false)
const dialogTitle = ref('大中修项目申报')
const addUnit = () => {
    active.value = 1
    dialogTitle.value = '大中修项目申报'
    isEdit.value = false
    dialogFormVisible.value = true
}
function editUnit(row) {
    active.value = 1
    declareMediumDetail(row.id).then(res => {
        form1.value = row
        form1.value.checkOptions = res.result.map(item => item.checkOptionId)
        form1.value.declareDetail = res.result
        form1.value.declareId = row.id
        declareMediumFile(row.id).then(res2 => {
            if (res2.result.length > 0) {
                res2.result.forEach(item => {
                    if (item.fileType == 1) {
                        fileList1.value = [
                            {
                                name: item.fileName,
                                url: item.fileUrl,
                                response: { result: item.fileUrl },
                                fileType: 1
                            }
                        ]
                    }
                    if (item.fileType == 2) {
                        fileList2.value = [
                            {
                                name: item.fileName,
                                url: item.fileUrl,
                                response: { result: item.fileUrl },
                                fileType: 2
                            }
                        ]
                    }
                    if (item.fileType == 3) {
                        fileList3.value = [
                            {
                                name: item.fileName,
                                url: item.fileUrl,
                                response: { result: item.fileUrl },
                                fileType: 3
                            }
                        ]
                    }
                    if (item.fileType == 4) {
                        fileList1.value = [
                            {
                                name: item.fileName,
                                url: item.fileUrl,
                                response: { result: item.fileUrl },
                                fileType: 4
                            }
                        ]
                    }
                    if (item.fileType == 5) {
                        fileList5.value = [
                            {
                                name: item.fileName,
                                url: item.fileUrl,
                                response: { result: item.fileUrl },
                                fileType: 5
                            }
                        ]
                    }
                    if (item.fileType == 16) {
                        fileList6.value = [
                            {
                                name: item.fileName,
                                url: item.fileUrl,
                                response: { result: item.fileUrl },
                                fileType: 16
                            }
                        ]
                    }
                    if (item.fileType == 17) {
                        fileList7.value = [
                            {
                                name: item.fileName,
                                url: item.fileUrl,
                                response: { result: item.fileUrl },
                                fileType: 17
                            }
                        ]
                    }
                    if (item.fileType == 18) {
                        fileList8.value = [
                            {
                                name: item.fileName,
                                url: item.fileUrl,
                                response: { result: item.fileUrl },
                                fileType: 18
                            }
                        ]
                    }
                    if (item.fileType == 19) {
                        fileList9.value = [
                            {
                                name: item.fileName,
                                url: item.fileUrl,
                                response: { result: item.fileUrl },
                                fileType: 19
                            }
                        ]
                    }
                })
            }
            dialogTitle.value = '编辑'
            isEdit.value = true
            dialogFormVisible.value = true
        })
    })
}
const closeDialog = () => {
    initForm()
    dialogFormVisible.value = false
}

const handleClose = (done) => {
    initForm()
    done()
}
const handleCurrentChange = (val) => {
    page.value = val
    getTableData()
}
const tableData = ref([])
// 查询
const getTableData = async () => {
    const res = await declareMedium({
        pageNumber: page.value,
        pageSize: pageSize.value,
        ...searchInfo.value
    })
    if (res.code == 200) {
        tableData.value = res.result.data
        total.value = res.result.total
    }
}
getTableData()
const buildList = ref([])
const checkOptions = ref([])
onMounted(() => {
    optionList().then(res => {
        checkOptions.value = res.result
    })
    buildingAll().then(res => {
        buildList.value = res.result
    })
})

const onSubmit = () => {
    page.value = 1
    getTableData()
}
const onReset = () => {
    page.value = 1
    searchInfo.value = {
        buildingName: '',
        name: '',
        type: 1
    }
    getTableData()
}
const yyglForm = ref(null)
function next(val) {
    yyglForm.value.validate(async (valid) => {
        if (valid) {
            if (active.value == 1) {
                const selectedLabels = checkOptions.value.filter(option => form1.value.checkOptions.includes(option.id))
                //form1.value.declareDetail = form1.value.declareDetail.filter(item=>selectedLabels.includes(item.system))
                let declareDetail = selectedLabels.map(item => {
                    return {
                        checkOptionId: item.id,
                        system: item.name,
                        name: '',
                        profile: '',
                        funding: '',
                        notes: ''
                    }
                })
                declareDetail.forEach(item => {
                    form1.value.declareDetail.forEach(m => {
                        if (item.system == m.system) {
                            item.name = m.name
                            item.profile = m.profile
                            item.funding = m.funding
                            item.notes = m.notes
                        }
                    })
                })
                form1.value.declareDetail = declareDetail
            }
            if (active.value == 2) {
                let flag = form1.value.declareDetail.some(item => {
                    return !item.name || !item.funding || !item.profile
                })
                if (flag) {//表示没填完整
                    ElMessage({
                        type: 'info',
                        message: '请填写完整信息'
                    })
                    return
                }
                // form1.value.form1.value.declareDetail = form1.value.declareDetail.value
                form1.value.totalFunding = String(totalNum.value)
            }
            if (active.value == 3) {
                let declareFile = []
                if (fileList1.value.length > 0) {
                    declareFile.push({ fileName: fileList1.value[0].name, fileType: 1, fileUrl: fileList1.value[0].response.result })
                }
                if (fileList2.value.length > 0) {
                    declareFile.push({ fileName: fileList2.value[0].name, fileType: 2, fileUrl: fileList2.value[0].response.result })
                }
                if (fileList3.value.length > 0) {
                    declareFile.push({ fileName: fileList3.value[0].name, fileType: 3, fileUrl: fileList3.value[0].response.result })
                }
                if (fileList4.value.length > 0) {
                    declareFile.push({ fileName: fileList4.value[0].name, fileType: 4, fileUrl: fileList4.value[0].response.result })
                }
                if (fileList5.value.length > 0) {
                    declareFile.push({ fileName: fileList5.value[0].name, fileType: 5, fileUrl: fileList5.value[0].response.result })
                }
                if (fileList6.value.length > 0) {
                    declareFile.push({ fileName: fileList6.value[0].name, fileType: 16, fileUrl: fileList6.value[0].response.result })
                }
                if (fileList7.value.length > 0) {
                    declareFile.push({ fileName: fileList7.value[0].name, fileType: 17, fileUrl: fileList7.value[0].response.result })
                }
                if (fileList8.value.length > 0) {
                    declareFile.push({ fileName: fileList8.value[0].name, fileType: 18, fileUrl: fileList8.value[0].response.result })
                }
                if (fileList9.value.length > 0) {
                    declareFile.push({ fileName: fileList9.value[0].name, fileType: 19, fileUrl: fileList9.value[0].response.result })
                }
                form1.value.declareFile = declareFile
                form1.value.submitStatus = val
                let res
                if (isEdit.value) {
                    res = await applyEdit(form1.value)
                } else {
                    res = await declareMediumApply(form1.value)
                }
                if (res.code == 200) {
                    ElMessage({
                        type: 'success',
                        message: isEdit.value ? '编辑成功' : val == 1 ? '申报成功' : '保存成功'
                    })
                    getTableData()
                }
                initForm()
                dialogFormVisible.value = false
            }
            if (active.value < 3) {
                active.value++
            }
            //   let res
            //   if (isEdit.value) {
            //     res = await updateDyn(form.value)
            //   } else {
            //     res = await createDy(form.value)
            //   }
            //   if (res.code == 200) {
            //     ElMessage({
            //       type: 'success',
            //       message: isEdit.value ? '编辑成功' : '添加成功!'
            //     })
            //     getTableData()
            //   }
            //initForm()
            //dialogFormVisible.value = false
        }
    })
}
function downloadTable() {
    applyForm(form1.value).then(res => {
        window.open(res.result)
    })
    //window.open("http://warehouse-api.lanbeiduo.com/api/file/download/aEp3oUwXZ6_大中修规划申报表.docx")
}
function wxhDownload() {
    window.open("http://warehouse-api.lanbeiduo.com/api/file/download/j4IAPuj1WZ_维修函模板.docx")
}
function prev() {
    active.value--
}
const fileList1 = ref([])
const fileList2 = ref([])
const fileList3 = ref([])
const fileList4 = ref([])
const fileList5 = ref([])
const fileList6 = ref([])
const fileList7 = ref([])
const fileList8 = ref([])
const fileList9 = ref([])

function uploadSuccess1(res) {
    if (res.code != 200) {
        ElMessage({
            type: 'warning',
            message: res.message
        })
        fileList1.value = []
    }
    yyglForm.value.validateField('wxh')
}
function uploadSuccess2(res) {
    if (res.code != 200) {
        ElMessage({
            type: 'warning',
            message: res.message
        })
        fileList2.value = []
    }
    yyglForm.value.validateField('sqb')
}
function uploadSuccess3(res) {
    if (res.code != 200) {
        ElMessage({
            type: 'warning',
            message: res.message
        })
        fileList3.value = []
    }
    yyglForm.value.validateField('gcks')
}
function uploadSuccess4(res) {
    if (res.code != 200) {
        ElMessage({
            type: 'warning',
            message: res.message
        })
        fileList4.value = []
    }
}
function uploadSuccess5(res) {
    if (res.code != 200) {
        ElMessage({
            type: 'warning',
            message: res.message
        })
        fileList5.value = []
    }
}
function uploadSuccess6(res) {
    if (res.code != 200) {
        ElMessage({
            type: 'warning',
            message: res.message
        })
        fileList6.value = []
    }
    yyglForm.value.validateField('byxzm')
}
function uploadSuccess7(res) {
    if (res.code != 200) {
        ElMessage({
            type: 'warning',
            message: res.message
        })
        fileList7.value = []
    }
    yyglForm.value.validateField('dtbg')
}
function uploadSuccess8(res) {
    if (res.code != 200) {
        ElMessage({
            type: 'warning',
            message: res.message
        })
        fileList8.value = []
    }
    yyglForm.value.validateField('xfzg')
}
function uploadSuccess9(res) {
    if (res.code != 200) {
        ElMessage({
            type: 'warning',
            message: res.message
        })
        fileList9.value = []
    }
    yyglForm.value.validateField('zzcl')
}
const dialog3 = ref(false)
const fjList = ref([])
function seeFile(id) {
    declareMediumFile(id).then(res => {
        fjList.value = res.result
        dialog3.value = true
    })
}
function handleClose3() {
    dialog3.value = false
}
function closeDialog3() {
    dialog3.value = false
}
const download = (row) => {
    window.open(row.fileUrl)
}
const detailVisible = ref(false)
function handleCloseDetail() {
    detailVisible.value = false
}
const form2 = ref({})
function seeDetail(row) {
    declareMediumDetail(row.id).then(res => {
        form2.value = row
        form2.value.checkOptions = res.result.map(item => item.checkOptionId)
        form2.value.declareDetail = res.result
        detailVisible.value = true
    })
}
</script>

<style lang="scss">
.ant-alert-info {
    display: flex;
    justify-content: end;
    align-items: center;
    background-color: #e6f7ff;
    border: 1px solid #91d5ff;
    color: #1890ff;
    padding: 5px;

    .anticon {
        display: flex;
        align-items: center;
        cursor: pointer;
    }
}

.section-title {
    font-weight: bold;
    font-size: 18px;
    line-height: 33px;
    padding: 8px 0 4px 14px;
    color: #4E7DFD;
    position: relative;
}

.section-title:before {
    content: '';
    position: absolute;
    top: 17px;
    left: 0;
    width: 6px;
    height: 14px;
    border-radius: 3px;
    background: #4E7DFD;
}

.sb-draw {
    .title {
        font-size: 16px;
        padding-bottom: 10px;
        margin-bottom: 10px;
        border-bottom: 1px solid #e4e7ed;
    }
}
</style>